<template>
	<div ref="chartRef" :style="{ height, width }"></div>
</template>

<script setup lang="ts">
import { PropType, watch } from 'vue';
import type { Ref } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import { level, ChartsDataType } from '../data';
const props = defineProps({
	width: {
		type: String as PropType<string>,
		default: '100%',
	},
	height: {
		type: String as PropType<string>,
		default: '100%',
	},
	loading: Boolean,
	data: {
		type: Array as PropType<ChartsDataType[]>,
		default: () => [],
	},
});
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
watch(
	() => props.loading,
	() => {
		if (props.loading) {
			return;
		}
		setOptions({
			tooltip: {
				trigger: 'axis',
			},
			toolbox: {
				feature: {
					saveAsImage: {},
				},
			},
			xAxis: {
				type: 'category',
				data: level.map((d) => d.label),
			},
			yAxis: [
				{
					type: 'value',
					axisTick: {
						show: false,
					},
					minInterval: 1, //最小刻度是1
					splitLine: {
						show: true,
						lineStyle: {
							width: 1,
							type: 'dashed',
							color: 'rgba(226,226,226,0.5)',
						},
					},
				},
			],
			grid: { left: '2%', right: '2%', top: '2%', bottom: 10, containLabel: true },
			series: [
				{
					data: props.data,
					type: 'bar',
					barMaxWidth: 30,
					showBackground: true,
					backgroundStyle: {
						color: 'rgba(180, 180, 180, 0.1)',
					},
				},
			],
		});
	},
	{ immediate: true }
);
</script>

<style lang="scss" scoped></style>
